<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<include file="_layout/mall.head.html" />
</head>
<body class="body-fixed">
	<div class="container">
		<div class="content">
			<div class="content-body">
				<include file="_layout/mall.search.html" />
				<notempty name="banners">
				<div class="scale_wh scale_4_3">
			         <div class="scale_content">
			         	<div class="js-banner swiper-container">
							<div class="swiper-wrapper">
								<foreach name="banners" item="item">
								<div class="swiper-slide"><a href="{$item.url|default='javascript:;'}"><img src="{$item.img_url}"></a></div>
								</foreach>
					  		</div>
						</div>
			         </div>
		      	</div>
				</notempty>
				<include file="_layout/mall.news.html" />
				<!--商品列表-->
				<section class="js-goods-container">
					<div class="js-sort tabber tabber-n4 tabber-double-11 clearfix">
						<a class="active" href="javascript:;" data-sort="all">综合</a>
					    <a href="javascript:;" data-sort="newest">最新</a>
					    <a href="javascript:;" data-sort="hot">人气</a>
					    <a href="javascript:;" data-sort="sales">销量</a>
					</div>
					<ul id="goods-list" class="sc-goods-list pic clearfix size-2">
						<li><div class="empty-list list-finished"><p class="font-size-12">正在加载中...</p></div></li>
					</ul>
				</section>
			</div>
		</div>
		<include file="_layout/mall.copyright.html" />
	</div>
	<include file="_layout/mall.footer.html" />
	<script type="text/javascript">
	require(['goods_list', 'search'], function(gv, searchbar){
		var $container = $('.js-goods-container')
	       ,$sort      = $container.find('.js-sort')
	       ,$list      = $container.children('.js-goods-list')
	       ,focus      = 'all';
		
		// 查询参数
	    gv.queryParams = function(params){
	        for(var key in searchbar.data){
	            params[key] = searchbar.data[key];
	        }
	        params.sort = focus;
	        return params;
	    }
		
		gv.start({
	        url: '/h5/list/search',
	        container: '#goods-list',
	        pullfresh: true
	    });
		
		// 排序
	    $sort.on('click', 'a',function(){
            var data = history.state;
            data[gv.cacheKey].scrollTop = document.body.scrollTop;
            history.replaceState(data, '', '');
            
	        var $this = $(this);
	        $this.addClass('active').siblings().removeClass('active');
	        focus = $this.data('sort');
	        
	        gv.cacheKey = focus;
	        gv.pullfresh.doRefresh();
	        return false;
	    });
		
		// 固定顶部排序
	    var fixedTop = $container.offset().top - $sort.height() * 2;
	    var fixed = false;
	    window.addEventListener('scroll', function(){
	        if(document.body.scrollTop >= fixedTop){
	            if(!fixed){
	                fixed = true;
	                $sort.css({position: 'fixed', top: '44px'});
	            }
	        }else if(fixed){
	            fixed = false;
	            $sort.css({position: ''});
	        }
	    }, false);
	});

	<if condition="count($banners) gt 1">
	require(['swiper'], function(){
		var mySwiper = new Swiper('.js-banner',{
			autoplay : 5000,
			loop : true,
			autoplayDisableOnInteraction : false
		});
	});
	</if>
	
	require(['module/cart/num']);
</script>
</body>
</html>